import React, { Component } from "react";
import { View, Text, Image, StyleSheet, FlatList } from "react-native";
import CustomerHeader from "../../widget/customerHeader";

export default class BlackList extends Component{
  constructor(props) {
    super(props);
    this.state={
      dataList:[{
        label:'1',
        value:1
      },{
        label:'2',
        value:2
      }]
    }
  }
  _renderItem(){
    return (
      <View style={styles.cell}>
        <Image style={{width:45,height:45,borderRadius:22.5}} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}></Image>
        <View style={{flex:1,marginLeft:9}}>
          <Text style={{color:'#000000',fontSize:15}}>兔子爱吃胡萝卜</Text>
          <Text style={{color:'#9B9B9B',fontSize:13,marginTop:8}}>拉黑时间：2021-10-29 18:00</Text>
        </View>
        <View style={styles.btnBox}>
          <Text style={styles.btnTitle}>解除拉黑</Text>
        </View>
      </View>
    )
  }
  render() {
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader title={'黑名单'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <FlatList data={this.state.dataList}
                  keyExtractor={(item)=>item.value}
                  renderItem={this._renderItem}></FlatList>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  cell:{
    backgroundColor:'#fff',
    height:73,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:15
  },
  btnBox:{
    width:64,
    height: 30,
    borderRadius:15,
    backgroundColor: '#F74141'
  },
  btnTitle:{
    color:'#fff',
    fontSize:12,
    flex:1,
    lineHeight:30,
    textAlign:'center'
  }
})
